/**************************************************
	DEPENDENCY ARROWS
**************************************************/

//CSS (shared)
&[data-skill-id="2"] {
	.skill-dependency {
		margin-left:-15px;
		width:350px;
		height:60px;
		background-position:-285px -10px;
	}
}

//CSS Tools, Graphic Design Tools, User Testing, jQuery FX
&[data-skill-id="3"],
&[data-skill-id="5"],
&[data-skill-id="20"],
&[data-skill-id="23"] {
	.skill-dependency {
		margin-left: 15px;
		width: 60px;
		height: 40px;
		background-position: -740px -10px;
		margin-bottom: -50px;
	}
}

//Site design
&[data-skill-id="4"] {
	.skill-dependency {
		margin-left: -20px;
		width: 40px;
		height: 190px;
		background-position: 0 -10px;
	}
}

//Analytics, JS Libs + Frameworks, Web Framework, Advanced DB Management, Deployment
&[data-skill-id="7"],
&[data-skill-id="9"],
&[data-skill-id="10"],
&[data-skill-id="12"],
&[data-skill-id="14"],
&[data-skill-id="25"] {
	.skill-dependency {
		margin-left: -20px;
		width: 40px;
		height: 70px;
		background-position: 0 -210px;
	}
}

//Server side dev, UX design (join)
&[data-skill-id="15"],
&[data-skill-id="22"] {
	.skill-dependency {
		margin-left: -60px;
		width: 120px;
		height: 80px;
		background-position: -160px 10px;
	}
}

//User Authentication
&[data-skill-id="16"] {
	.skill-dependency {
		margin-left: -85px;
		width: 60px;
		height: 40px;
		background-position: -640px -10px;
		margin-bottom: -50px;
	}
}

//AJAX/APIs
&[data-skill-id="17"] {
	.skill-dependency {
		margin-left: -85px;
		width: 150px;
		height: 40px;
		background-position: -640px -10px;
		margin-bottom: -50px;
	}
}

//Graphic design (split)
&[data-skill-id="19"] {
	.skill-dependency {
		margin-left: -20px;
		width: 120px;
		height: 80px;
		background-position: -40px 10px;
	}
}

//Full Website
&[data-skill-id="26"] {
	.skill-dependency {
		margin-left:-310px;
		width:720px;
		height:200px;
		background-position:-60px -90px;
	}
}

/**************************************************
	TOOLTIPS
**************************************************/

&[data-skill-id="10"],
&[data-skill-id="11"],
&[data-skill-id="12"],
&[data-skill-id="13"],
&[data-skill-id="14"],
&[data-skill-id="15"],
&[data-skill-id="16"],
&[data-skill-id="10"],
&[data-skill-id="17"],
&[data-skill-id="24"],
&[data-skill-id="25"] {
	.tool-tip {
		left:-320px;
	}
}



/**************************************************
	ICON POSITIONS & SPRITES
**************************************************/

//HTML
.skill-position(1, 10000, 440, 10);
.skill-icon(1, 5, 1);
//CSS
.skill-position(2, 9800, 320, 135);
.skill-icon(2, 5, 2);
//CSS Tools
.skill-position(3, 9810, 220, 135);
.skill-icon(3, 8, 1);
//Site Design
.skill-position(4, 9400, 320, 385);
.skill-icon(4, 3, 3);
//jQuery Effects
.skill-position(5, 9500, 220, 385);
.skill-icon(5, 1, 3);
//SEO
.skill-position(6, 9000, 400, 135);
.skill-icon(6, 7, 1);
//Analytics
.skill-position(7, 8800, 400, 260);
.skill-icon(7, 1, 1);
//Javascript
.skill-position(8, 8600, 480, 135);
.skill-icon(8, 5, 3);
//JS Libraries & Frameworks
.skill-position(9, 8400, 480, 260);
.skill-icon(9, 6, 1);
//Front-end Development (Epic)
.skill-position(10, 8200, 480, 385);
.skill-icon(10, 3, 4);
//Server-side Languages
.skill-position(11, 8000, 640, 135);
.skill-icon(11, 2, 5);
//Web Frameworks
.skill-position(12, 7800, 640, 260);
.skill-icon(12, 2, 6);
//Database Authoring
.skill-position(13, 7600, 720, 135);
.skill-icon(13, 6, 3);
//Advnaced DB Management
.skill-position(14, 7400, 720, 260);
.skill-icon(14, 6, 4);
//Server-side Development (Epic)
.skill-position(15, 7200, 680, 385);
.skill-icon(15, 3, 2);
//User Authentication
.skill-position(16, 7000, 780, 385);
.skill-icon(16, 4, 3);
//AJAX & APIs
.skill-position(17, 7300, 580, 385);
.skill-icon(17, 6, 2);
//User Discovery
.skill-position(18, 9990, 140, 135);
.skill-icon(18, 7, 6);
//Graphic Design
.skill-position(19, 9980, 100, 260);
.skill-icon(19, 5, 4);
//Graphic Design Tools
.skill-position(20, 9985, 0, 260);
.skill-icon(20, 7, 2);
//Prototypes
.skill-position(21, 9960, 180, 260);
.skill-icon(21, 7, 3);
//User Experience Design (Epic)
.skill-position(22, 9950, 140, 385);
.skill-icon(22, 3, 5);
//User Testing
.skill-position(23, 9955, 40, 385);
.skill-icon(23, 9, 1);
//Server Administration
.skill-position(24, 5000, 840, 135);
.skill-icon(24, 8, 4);
//Deployment
.skill-position(25, 4000, 840, 260);
.skill-icon(25, 7, 4);
//Web Site Development (Epic)
.skill-position(26, 3000, 440, 520);
.skill-icon(26, 3, 1);

.skill-position(@id, @z-index, @left, @top) {
	(~'.skill[data-skill-id="@{id}"]') {
		//z-index:@z-index;
		left:unit(@left, px);
		top:unit(@top, px);
	}
}

.skill-icon(@id, @x, @y) {
	(~'.skill[data-skill-id="@{id}"]') {
		.icon {
			background-position: -(@x - 1)*60px -(@y - 1)*60px;
		}
	}
}